<template>
    <section class="banner">
        <div>
            <div @click="clickName === 'inbox' ? '' : linkTo('inbox')" :class="clickName === 'inbox' ? 'banner-active' : ''">
                <img alt="收件箱" src="./../../../assets/email/images/inbox.png" />
                <span>收件箱</span>
            </div>
            <div @click="clickName === 'drafts' ? '' : linkTo('drafts')" :class="clickName === 'drafts' ? 'banner-active' : ''">
                <img alt="草稿箱" src="./../../../assets/email/images/drafts.png" />
                <span>草稿箱</span>
            </div>
            <div @click="clickName === 'sent' ? '' : linkTo('sent')" :class="clickName === 'sent' ? 'banner-active' : ''">
                <img alt="已发送" src="./../../../assets/email/images/sent.png" />
                <span>已发送</span>
            </div>
            <div @click="clickName === 'trash' ? '' : linkTo('trash')" :class="clickName === 'trash' ? 'banner-active' : ''">
                <img alt="废纸篓" src="./../../../assets/email/images/trash.png" />
                <span>废纸篓</span>
            </div>
            <div @click="clickName === 'query' ? '' : linkTo('query')" :class="clickName === 'query' ? 'banner-active' : ''">
                <img alt="查询邮件" src="./../../../assets/email/images/query.png" />
                <span>查询邮件</span>
            </div>
        </div>

        <div>
            <router-link to="/email/settings" class="setting-email"><img alt="邮箱设置" src="./../../../assets/email/images/setting.png" />邮箱设置</router-link>
            <router-link to="/email/send" class="send-email"><img alt="写邮件" src="./../../../assets/email/images/send.png" />写邮件</router-link>
        </div>
    </section>
</template>

<script>
export default {
　　props: { // 接受父组件的值
　　    clickName: String,
　　},
    data() {
        return {
            
        }
    },
    methods: {
         /**
         * 路由跳转
         * @param {String} name 具体页面
         */
        linkTo(name) {
            this.$router.push(`/email/${name}`);
        }
    },
}
</script>

<style lang="scss">
    #front_email {
        .banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px 0 10px;
            height: 68px;
            font-size: 14px;
            border: 1px solid #EBEBEB;
            background: url('./../../../assets/email/images/banner.png') no-repeat 100% 100%;

            a {
                line-height: 1;
            }

            >div:first-child {
                display: flex;
                height: 100%;
                
                >div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20px;
                    width: 80px;
                    height: 100%;
                    font-size: 12px;
                    cursor: pointer;

                    >img {
                        margin-bottom: 11px;
                    }
                }
            }

            .banner-active {
                background: #CDECFF;
            }

            .setting-email {
                padding-right: 53px;
                color: #6B7FA9;

                img {
                    padding-right: 5px;
                }
            }

            .send-email {
                padding: 7px 15px;
                color: #fff;
                border-radius: 2px;
                background-color: #348EFC;

                img {
                    padding-right: 16px;
                }
            }
        }
    }
</style>